<template>
  <div class="record-wrapper">
    <div v-if="from == 1" class="msg msg-right">
      <div class="img-wrapper">
        <img class="img" src="@/assets/img/human.png" >
      </div>
      <div class="message-wrapper message-wrapper-right">
        <div class="message">{{message}}</div>
      </div>
    </div>

    <div v-else class="msg msg-left">
      <div class="img-wrapper">
        <img class="img" src="@/assets/img/robot.png" >
      </div>
      <div class="message-wrapper message-wrapper-left">
        <div class="message">{{message}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dialogbox',
  props: {
    from: Number,
    message: String
  },
  data () {
    return {

    }
  }
}
</script>

<style lang="less" scoped>
.record-wrapper{
  margin: 4px;
  padding: 4px;
}
.msg{
  display: flex;
  flex-direction: row;

  .message-wrapper{
    max-width: 280px;
    margin:0px 10px 0px 10px;

    .message{
      margin:8px;
      word-wrap: break-word;
      text-align: left;
    }
  }
  .message-wrapper-left{
    background-color: lightslategray;
    border-radius: 0px 12px 12px 12px;
  }
  .message-wrapper-right{
    background-color: powderblue;
    border-radius: 12px 0 12px 12px;
  }
  .img{
    flex: auto;
    height: 36px;
    width: 36px;
    border-radius: 8px;
  }
}
.msg-right{
  flex-direction: row-reverse ;
}
.msg-left{
  flex-direction: row;
}
</style>
